import { useEffect } from 'react'
import { Form, Button, Input, Modal, message } from 'antd'
import s from "./index.module.less";
import { versionPathOperation } from "@/utils/index";

function App(): JSX.Element {
  const [form] = Form.useForm();
  // const [config, setConfig] = useState<any>({
  //   path: '',
  //   name: '',
  //   port: 0,
  //   bagPath: ''
  // })

  const onFinish = async (values: any) => {
    console.log(values);
    const isTure = await window.api.duQuMir({ ...values, port: parseInt(values.port) })
    if (isTure) {
      message.success('修改成功')
    }
  };

  const H = ({ value, onChange, type = 'selectDirectory' }: any) => {
    return (
      <div className='flex'>
        <Input value={value} />
        <Button type='primary' onClick={() => {
          const path = window.api.syncOperationWindow(type)
          const bagPath = window.api.getBagPath(path)
          versionPathOperation.save('versionPath', path)
          form.setFieldValue("bagPath", bagPath)
          onChange(path)
        }}>浏览</Button>
      </div>
    )
  }

  useEffect(() => {
    form.setFieldsValue({
      path: versionPathOperation.get('versionPath')
    })
  }, [])

  return (
    <div className={s.box}>
      <h1>版本一键配置</h1>


      <Form
        form={form}
        onFinish={onFinish}
        layout="vertical"
        size='small'
      >
        <Form.Item
          label='请输入版本服务器所在路径'
          extra='(将根据这个路径自动修改游戏服务端所在目录和access数据库路径)'
          name="path"
          rules={[{ required: true, message: '请输入版本服务器所在路径!' }]}
        >
          <H />
        </Form.Item>

        <Form.Item
          label="游戏服务器名称"
          name="name"
          rules={[{ required: true, message: '游戏服务器名称!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="请输入第一个服务器的端口号(后面的端口将根据这个端口递增+1)"
          name="port"
          rules={[{ required: true, message: '请输入端口号!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="大背包目录(如：M:\某某游戏大背包)"
          name="bagPath"
          rules={[{ required: true, message: '请输入大背包目录!' }]}
        >
          <Input />
        </Form.Item>

        <Button type='primary' htmlType="submit">确定</Button>
        <Button style={{ marginLeft: 10 }} onClick={() => {
          Modal.info({
            title: 'esp.M2设置要求',
            icon: null,
            content: (
              <div>
                ----ESP客户端功能扩展一<br />
                <br />
                1.引擎功能扩展<br />
                开启商铺购买触发<br />
                开启个人商铺购买拦截<br />
                <br />
                2.选择引擎官网<br />
                使用全新的多线程游戏网关<br />
                <br />
                客户端功能扩展一<br />
                （插件内挂一）<br />
                <br />
                勾选 开启内挂~<br />
                <br />
                勾选 开启自动挂机~<br />
                <br />
                勾选 换地图停止挂机<br />
                <br />
                （大背包）<br />
                勾选 开启大背包<br />
                检查大背包格子<br />
                检查大背包目录<br />
                <br />
                ----选择M2程序-选项-功能设置-个人商店<br />
                <br />
                人物下线关闭个人商店 勾选<br />
                <br />
                商铺类型 选择 默认店铺<br />
              </div>
            ),
            onOk() { },
          });
        }}>查看esp.M2设置要求</Button>
      </Form>


      {/* <div>
        <p>请输入版本服务器所在路径(将根据这个路径自动修改游戏服务端所在目录和access数据库路径):</p>
        <div className='flex'>
          <input value={config.path} onChange={(e) => {
            const c = {
              ...config
            }
            c.path = e.target.value
            setConfig(c)
          }} />

          <div className='file-box'>
            <button onClick={() => {
              const c = {
                ...config
              }
              c.path = window.api.syncOperationWindow('selectDirectory')
              c.bagPath = window.api.getBagPath(c.path)
              setConfig(c)
            }}>浏览</button>
          </div>
        </div>
      </div>

      <div>
        <p>游戏服务器名称:</p>
        <input placeholder="" onChange={(e) => {
          const c = {
            ...config
          }
          c.name = e.target.value
          setConfig(c)
        }} />
      </div>

      <div>
        <p>请输入第一个服务器的端口号，后面的端口将根据这个端口递增+1:</p>
        <input placeholder="" type='number' onChange={(e) => {
          const c = {
            ...config
          }
          c.port = parseInt(e.target.value)
          setConfig(c)
        }} />
      </div>

      <div>
        <p>大背包目录(如：M:\永劫之城大背包):</p>
        <input value={config.bagPath} onChange={(e) => {
          const c = {
            ...config
          }
          c.bagPath = e.target.value
          setConfig(c)
        }} />
      </div>

      <Button onClick={async () => {
        const isTure = await window.api.duQuMir(config)
        console.log(isTure, 'isTure')
        if (isTure) {
          message('修改成功')
        }
      }}>确定</Button> */}
    </div>
  )
}

export default App
